<template>
    <ul class="title">
        <li :class="{ active: prop.dataSource == 'all' }" @click="prop.resetData('all')">
            <span>全部</span>
            <span style="color:#3388FF">
                {{ onlineNum + offlineNum }}
            </span>
        </li>
        <li :class="{ active: prop.dataSource == 'online' }" @click="prop.resetData('online')">
            <span>
                在线
                <el-tooltip effect="dark" content="在线状态包括行驶、停留、熄火以及定位失败" placement="bottom">
                    <svg class="svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-tips"></use>
                    </svg>
                </el-tooltip>
            </span>
            <span style="color:#11C79B">
                {{ onlineNum }}
            </span>
        </li>
        <li :class="{ active: prop.dataSource == 'offline' }" @click="prop.resetData('offline')">
            <span>
                离线
                <el-tooltip effect="dark" content="离线状态只包括离线" placement="bottom">
                    <svg class="svg-icon" aria-hidden="true">
                        <use xlink:href="#icon-tips"></use>
                    </svg>
                </el-tooltip>
            </span>
            <span style="color:#6B7A99">
                {{ offlineNum }}
            </span>
        </li>
    </ul>
</template>
<script setup>
const prop = defineProps({
    data: { type: Object },
    resetData: { type: Function },
    dataSource: { type: String },
});
const onlineNum = computed(() => {
    let _sortEntity = prop.data
    return _sortEntity.driving.length + _sortEntity.stop.length + _sortEntity.flameout.length + _sortEntity.positioningFail.length
})
const offlineNum = computed(() => {
    let _sortEntity = prop.data
    return _sortEntity.offline.length
}) 
</script>
<style lang='scss' scoped>
.title {
    color: #424242;
    display: flex;
    margin: 0 15px;
    margin-top: 16px;
    justify-content: space-between;

    li {
        width: 30%;
        height: 52px;
        background-color: #F1F6FA;
        color: #223355;
        font-size: 14px;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        cursor: pointer;

        span {
            text-align: center;
        }

        span:last-of-type {
            font-size: 16px;
            font-weight: 600;
        }

        &.active {
            span {
                color: #fff !important;
            }

            background-image: linear-gradient(to bottom, #3388FF, #00A0E9);
        }
    }
}
</style>